        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <script src="vue.js"></script>
            <script src="index.js"></script>
            <link rel="stylesheet" href="index.css">
        </head>


        </head>
        <body>
        <div id="app">
            <el-form  ref="ruleForm" status-icon   :model="formdata"  :rules="rules" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="formdata.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="formdata.password"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>


        <script>
                var  vue= new Vue({
                    el:"#app",
                    data(){
                        //  自定义用户名校验器   rule  校验规则  value  用户输入值   callback  标签校验结果  无参数 校验成功  有参数 校验失败
                        //   后台ajax 发送请求   后台数据库校验
                        var validateName = (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请输入用户名'));
                                // callback()函数有参数  表示校验非法
                            } else {
                                //  自定义后台ajax校验
                                    axios.get("/user/vaildaName.do?name="+value).then((res)=>{
                                        if(res.data.flag){
                                            callback();//  此函数如果无参数 表示校验合法
                                        }else{
                                            callback(new Error('用户名已经存在'));
                                        }
                                    })
                            }
                        };


                        return {

                            formdata:{
                                name:'',
                                password:''
                            },
                            rules: {
                                name: [
                                    { validator: validateName, trigger: 'blur' }


                                ]
                            }

                        }
                    },
                    methods:{
                        submitForm(ruleForm){
                            this.$refs[ruleForm].validate((valid)=>{
                                if(valid){
                                    alert("submit")
                                }else{
                                    return false;
                                }
                            })

                        }

                    }
                })
        </script>


        </body>
        </html>